<template>
  <div>
      <li>
          <div v-if="data.id>0" @click="updatepid(data.id)"
              :class="pid==data.id?'active':''" :id="data.id">{{data.name}}</div>
          <ul v-if="data.son && data.son.length>0">
              <reply v-for="son in data.son" :data="son" :key="son.id"/>
          </ul>
      </li>
  </div>
</template>

<script>
export default {
    data(){
        pid:0
    },
    name:'reply',
    props:['data'],
    methods:{
        // 参数是当前选中的id
        updatepid(pid){
            // 更新父id
            this.pid = pid
            // 去除所有颜色
            let divlist = document.getElementsByClassName('active')
            for(var i=0;i<divlist.length;i++){
                divlist[i].classList.remove('active')
            }
            // 把当前选中的加上颜色
            let prediv = document.getElementsById(pid)
            prediv.classList.add('active')
            // 存入localStorage
            localStorage.setItem('pid',pid)
        }
    },
}
</script>

<style>
.active{
    background-color:chartreuse;
}
</style>